<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>03_计算属性和监视</title>
  </head>
  <body>
    <!--
      1. 计算属性
        在computed属性对象中定义计算属性的方法
        在页面中使用{{方法名}}来显示计算的结果
      2. 监视属性:
        通过通过vm对象的$watch()或watch配置来监视指定的属性
        当属性变化时, 回调函数自动调用, 在函数内部进行计算
      3. 计算属性高级:
        通过getter/setter实现对属性数据的显示和监视
        计算属性存在缓存, 多次读取只执行一次getter计算
    -->
    <div id="app">
      <!-- 姓:
      <input type="text" placeholder="First Name" :value="firstName" /><br />
      名: <input type="text" placeholder="Last Name" :value="lastName" /><br /> -->
      姓:
      <input type="text" placeholder="First Name" v-model="firstName" /><br />
      名: <input type="text" placeholder="Last Name" v-model="lastName" /><br />
      姓名1:
      <input type="text" placeholder="Full Name1" v-model="fullName1" /><br />
      姓名2:
      <input type="text" placeholder="Full Name2" v-model="fullName2" /><br />
    </div>

    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      new Vue({
        el: "#app",
        data: {
          firstName: "li",
          lastName: "peihua",
          fullName2: "li peihua",
        },
        computed: {
          // 计算属性：依赖某些data数据参与计算，生成新的结果进行展示
          // 只读的计算属性
          // fullName1() {
          //   // 函数返回值，决定fullName1的值
          //   // 当内部依赖this上属性数据发生了变化，计算属性就会自动重新计算
          //   // 如果没变，就不会重新计算，使用缓存
          //   return `${this.firstName} ${this.lastName}`;
          // },
          // 可读可写的计算属性
          fullName1: {
            get() {
              // 属性的读取方法
              return `${this.firstName} ${this.lastName}`;
            },
            set(val) {
              // 属性的设置方法
              // this.fullName1 = 123;  val -> 123
              // 数组解构赋值
              const [firstName, lastName] = val.split(" ");
              // 更新
              this.firstName = firstName;
              this.lastName = lastName;
            },
          },
        },
        watch: {
          // 监视属性：监视原有data属性的变化，一旦变化就做一些事件
          firstName(newVal, oldVal) {
            // 监视data中firstName属性的变化
            // console.log(newVal, oldVal);
            this.fullName2 = `${newVal} ${this.lastName}`;
          },
          lastName(newVal, oldVal) {
            // 监视data中lastName属性的变化
            // console.log(newVal, oldVal);
            this.fullName2 = `${this.firstName} ${newVal}`;
          },
          fullName2(newVal) {
            const [firstName, lastName] = newVal.split(" ");
            // 更新
            this.firstName = firstName;
            this.lastName = lastName;
          },
        },
      });
    </script>
  </body>
</html>
